@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.5;
  font-weight: 400;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 全局主题变量 */
:root {
  --primary-color: #3b82f6;
  --primary-hover: #2563eb;
  --success-color: #10b981;
  --warning-color: #f59e0b;
  --error-color: #ef4444;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
}

body {
  min-height: 100vh;
  background-color: var(--gray-50);
  color: var(--gray-800);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* 确保所有元素都有过渡效果，使主题切换更平滑 */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* 暗色主题全局样式 */
.dark {
  --tw-bg-opacity: 1;
  --tw-text-opacity: 1;
}

.dark body {
  background-color: var(--gray-900);
  color: var(--gray-100);
}

/* 亮色主题全局样式 */
.light body {
  background-color: var(--gray-50);
  color: var(--gray-800);
}

/* 统一卡片样式 */
.card {
  @apply rounded-xl shadow-lg transition-all duration-300;
}

.card-light {
  @apply bg-white;
}

.card-dark {
  @apply bg-gray-800;
}

/* 统一按钮样式 */
.btn {
  @apply px-4 py-2 rounded-lg transition-colors duration-200 font-medium;
}

.btn-primary {
  @apply bg-blue-500 hover:bg-blue-600 text-white;
}

.btn-secondary {
  @apply bg-gray-100 hover:bg-gray-200 text-gray-800 dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-white;
}

/* 统一输入框样式 */
.input-field {
  @apply w-full p-4 rounded-xl border focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none transition-all;
}

.input-field-light {
  @apply bg-gray-50 border-gray-200 text-gray-800 placeholder-gray-400;
}

.input-field-dark {
  @apply bg-gray-700 border-gray-600 text-white placeholder-gray-400;
}